Mr笔记

Appearance

S02-01 CSS-基础 ​

[TOC]

概述 ​

CSS诞生 ​

从 HTML 被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的 HTML 只包含很少的显示属性。

随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能。但是随着这些功能的增加，HTML 变的越来越杂乱，而且HTML 页面也越来越臃肿。于是 CSS 便诞生了。

CSS 的出现，拯救了混乱的 HTML，当然更加拯救了我们 web 开发者。 让我们的网页更加丰富多彩。

CSS 的最大贡献就是： 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 而样式交给 CSS。

CSS初识 ​

CSS(Cascading Style Sheets，层叠样式表)：主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS 以 HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

开发者工具 ​

开发者工具打开方式：

  • F12
  • shift+ctrl+i
  • 右击网页空白处-查看

说明：

  • ctrl+滚轮可以放大开发者工具代码大小。
  • 左边是 HTML 元素结构，右边是 CSS 样式。
  • 右边 CSS 样式可以改动数值和颜色查看更改后效果。

Sublime快捷方式 ​

Sublime快捷方式：Sublime 可以快速提高我们代码的书写方式：

  • 标签名 + tab：生成标签，输入标签名后按 tab 键。如div + tab生成<div></div>。

  • 标签名 * n：生成多个相同标签，输入标签名加* 。如div*3生成 3 个 div。

  • 父标签 > 子标签：如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了。

  • 兄标签 + 弟标签：如果有兄弟关系的标签，用 + 就可以了，比如 div+p。

  • .类名 + tab：如果生成带有类名或者 id 名字的， 直接写 .demo + tab或者 #two + tab。

基础 ​

样式规则 ​

使用 HTML 时，需要遵从一定的规范。CSS 亦如此，要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。

CSS样式规则：

说明：

  • 选择器：用于指定 CSS 样式作用的 HTML 对象，花括号内是对该对象设置的具体样式。
  • 属性和属性值：以“键值对”的形式出现。
  • 属性：是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
  • :：属性和属性值之间用英文“:”连接。
  • ;：多个“键值对”之间用英文“;”进行区分。

CSS书写规范 ​

开始就形成良好的书写规范，是你专业化的开始。

空格规范：

  • 强制，选择器 与 { 之间必须包含空格。如：.selector { }
  • 强制， 属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。如：font-size: 12px;

选择器规范：

  • 强制， 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

    css
    /* good */
.post,
.page,
.comment {
  line-height: 1.5;
}

/* bad */
.post, .page, .comment {
  line-height: 1.5;
}

  • 建议，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

    css
    /* good */
#username input {
}
.comment .avatar {
}

/* bad */
.page .header .login #username input {
}
.comment div * {
}

属性规范：

  • 强制，属性定义必须另起一行。

    css
    /* good */
.selector {
  margin: 0;
  padding: 0;
}

/* bad */
.selector {
  margin: 0;
  padding: 0;
}

  • 强制， 属性定义后必须以分号结尾。

    css
    /* good */
.selector {
  margin: 0;
}

/* bad */
.selector {
  margin: 0;
}

CSS注释 ​

CSS 注释：用于在样式表中添加说明或备注，帮助开发者理解代码，但不会影响样式的渲染。

语法：

  • 单行注释：

    css
    /* 这是一个单行注释 */

  • 多行注释：

    css
    /* 
这是一个多行注释
可以跨越多行
*/

示例：

  1. 单行注释

    css
    body {
  background-color: white; /* 设置背景颜色为白色 */
}

  2. 多行注释

    css
    /*
下面的样式用于标题
设置字体大小和颜色
*/
h1 {
  font-size: 24px;
  color: blue;
}

CSS样式分类 ​

CSS 可以写到那个位置？ 是不是一定写到 html 文件里面呢？

CSS样式分类：CSS 根据编写的位置，可以分为：

  • 内联样式
  • 内部样式
  • 外部样式

内联样式 ​

内联样式：直接在 HTML 元素的 style 属性中定义的样式。

html
<p style="color: red;">这是红色文本。</p>

内部样式 ​

内部样式：在 HTML 文档的 <style> 标签中定义的样式。

html
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

外部样式 ​

外部样式：通过引入外部 CSS 文件来定义的样式，通常使用 <link> 标签。

html
<head>
  <link rel="stylesheet" href="styles.css" />
</head>

<link>：rel href type?，用于链接外部资源的空元素（无闭合标签），通常在 <head> 中声明，用于关联 CSS、图标、预加载资源等。

  • rel：string，定义当前文档与链接资源的关系（如 stylesheet、icon）。
  • href：string，指定外部资源的 URL。
  • type?：string，资源的 MIME 类型（如 text/css、image/png），现代浏览器可自动识别。

三种样式对比 ​

样式表优点缺点使用情况控制范围
行内样式书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）
内部样式部分结构和样式相分离没有彻底分离较多控制一个页面（中）
外部样式完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）

样式权重：行内样式 > 内部样式 > 外部样式

CSS三大特性 ​

我们学习 CSS 必须掌握的三个特性：

  • 层叠
  • 继承
  • 优先级

层叠性 ​

层叠性：是指在多个样式规则适用于同一元素时，决定哪些样式将被应用的机制。层叠性确保了最终样式的确定性。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

一般情况下，如果出现样式冲突，则会按照 CSS 书写的顺序，以最后的样式为准。

样式冲突遵循的原则：就近原则， 哪个样式离着结构近，就执行哪个样式。

继承性 ​

继承性：是指书写 CSS 样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

优点：

  • 简化代码：恰当地使用继承可以简化代码，降低CSS样式的复杂性。

可继承的属性：文本、列表相关的属性：

  • color：color
  • font-*：font-family、font-size、font-style、font-weight
  • line-*：line-height
  • text-*：text-align、text-indent、text-transform、text-decoration、text-shadow
  • list-style-*：list-style、list-style-type、list-style-position、list-style-image
  • *-spacing：letter-spacing、word-spacing、white-space
  • 其他：visibility、quotes

优先级 ​

优先级（Specificity，特指性，优先级规则）：决定了当多个样式规则适用于同一元素时，哪些规则将被应用。优先级的计算方式基于选择器的类型和特性。

优先级值：

关于 CSS 权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为 CSS 特性或称非凡性，它是一个衡量 CSS 值优先级的一个标准。

  • 0：通配符选择器*、组合选择器+ > ~、否定伪类:not()，继承属性
  • 1：标签选择器、伪元素
  • 10：类选择器、伪类选择器、属性选择器
  • 100：ID选择器
  • 1000：内联样式
  • ∞：!important

优先级规则：

  • 数位之间没有进制：不存在10个标签选择器等于一个类选择器一说。
  • 权重相同时则遵循就近原则：后面覆盖前面。
  • 优先级权重是可以叠加

示例： 优先级权重是可以叠加的

css
div ul  li   ------>      0,0,0,3
.nav ul li   ------>      0,0,1,2
a:hover      -----—>      0,0,1,1
.nav a       ------>      0,0,1,1
#nav p       ------>      0,1,0,1

CSS属性 ​

字体样式 ​

font-size ​

font-size：属性用于设置字号。

长度单位：该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

font-family@ ​

font-family：属性用于设置字体。

常用字体：网页中常用的字体有宋体、微软雅黑、黑体等。

css
/* 将网页中所有段落文本的字体设置为微软雅黑 */
p {
  font-family: '微软雅黑';
}

同时指定多个字体：中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

css
body {
  font-family: 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
}

分别设置中英文字体：

在CSS中，可以通过font-family属性为中文和英文分别设置不同的字体：

css
div {
  font-family: Arial, 'Times New Roman', 'Microsoft YaHei', SimHei;
}

说明：

  • 上述示例中，Arial和'Times New Roman'只能用于英文，而'Microsoft YaHei'和SimHei用于渲染中文
  • 定义字体顺序：将英文字体放在前面，中文字体放在后面。这样，当浏览器遇到不支持的字体时，会自动切换到下一个字体。
  • 利用以上规则可以实现为中文和英文分别设置不同的字体。

常用技巧：

  • 现在网页中普遍使用14px+。
  • 尽量使用偶数的数字字号。ie6 等老式浏览器支持奇数会有 bug。
  • 各种字体之间必须使用英文状态下的逗号隔开。
  • 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。
  • 当需要设置英文字体时，英文字体名必须位于中文字体名之前。
  • 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如 font-family: "Times New Roman";。
  • 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode@ ​

中文字体名称的问题：在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

解决方案：

  • 方案一： 使用英文替代

    css
    font-family:"Microsoft Yahei"

  • 方案二： 使用 Unicode 编码中文：使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

    css
    font-family: "\5FAE\8F6F\96C5\9ED1" /* 微软雅黑 */

    image-20250527174528822

相关全局函数：

  • encodeURI()：(uri)，替代 escape()，用于对完整 URI进行编码的函数，遵循 UTF-8 编码标准，保留 URI 的合法字符（如协议、域名、路径中的 / 等）。
  • decodeURI()：(encodedURI)，替代 unescape()，用于解码通过 encodeURI() 编码的 URI的函数。保留 URI 的结构（如路径分隔符 /、查询符 ? 等），并支持 UTF-8 编码的字符解码。
  • encodeURIComponent()：(str)，替代 escape()，用于对 URI 组成部分（如查询参数、哈希值等）进行编码的函数。遵循 UTF-8 编码标准，会对更多字符（如 /, ?, = 等）进行编码，适合处理 URL 的局部内容。
  • decodeURIComponent()：(encodedURI)，替代 unescape()，用于解码由 encodeURIComponent() 编码的字符串的函数。它专门处理 URI 组成部分（如查询参数、哈希值等），将转义序列还原为原始字符，支持 UTF-8 编码标准。
  • escape()：(str)，已废弃，用于将字符串编码成新的由十六进制转义序列替换的字符串。
  • unescape()：(str)，已废弃，用于解码通过 escape() 编码的字符串的旧方法。

测试字体：可以通过以上相关全局函数来测试属于什么字体：

字体名称英文名称Unicode 编码
宋体SimSun\5B8B\4F53
新宋体NSimSun\65B0\5B8B\4F53
黑体SimHei\9ED1\4F53
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312
隶书LiSu\96B6\4E66
幼园YouYuan\5E7C\5706
华文细黑STXihei\534E\6587\7EC6\9ED1
细明体MingLiU\7EC6\660E\4F53
新细明体PMingLiU\65B0\7EC6\660E\4F53

最优方案：为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体。

font-weight ​

字体加粗除了用 b 和 strong 标签之外，可以使用 CSS 来实现，但是 CSS 是没有语义的。

font-weight：关键字|数值|全局值，可继承，用于控制字体粗细的属性。常用值：normal(400)、bold(700)。

  • 关键字：
    • normal：等价于400，默认，标准字重。
    • bold：等价于700，加粗字重。
    • bolder：比父元素字重更粗一级。
    • lighter：比父元素字重更细一级。
  • 数值：范围：100-900，9级字重刻度（步长为100）。常用值：100(细) 400(正常) 700(粗)。
  • 全局值：
    • inherit：继承父元素字重。
    • initial：重置为默认值 (normal)。
    • unset：重置为自然值。

示例：

  1. 基础文本强调

    css
    h1 {
  font-weight: 700; /* 标题加粗 */
}

p {
  font-weight: 400; /* 正文正常 */
}

  2. 响应式字重调整

    css
    @media (max-width: 768px) {
  .title { font-weight: 600; } /* 小屏减少字重 */
}

  3. 动态字重变化

    css
    .button:hover {
  font-weight: bolder; /* 悬停时自动加粗一级 */
}

font-style ​

字体倾斜除了用 i 和 em 标签之外，可以使用 CSS 来实现，但是 CSS 是没有语义的。

font-style属性用于控制文本倾斜样式的属性。如设置斜体、倾斜或正常字体，其可用属性值如下：

  • normal：默认值，浏览器会显示标准的字体样式。

  • italic：浏览器会显示斜体的字体样式。

  • oblique：浏览器会显示倾斜的字体样式。

注意：平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

font@ ​

font属性用于对字体样式进行综合设置，其基本语法格式如下：

css
selector {
  font: [font-style] [font-weight] font-size/[line-height] font-family;
}

说明：

  • 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
  • 注意：其中不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family属性，否则 font 属性将不起作用。

示例：

css
p {
  font: italic bold 16px/1.5 'Helvetica Neue', Arial, sans-serif;
}

@font-face ​

@font-face：用于定义自定义网络字体，使网页能够使用用户本地系统未安装的字体。

语法：@font-face 必须放在 CSS 顶层（非选择器内）。

css
@font-face {
  font-family: '自定义字体名称';
  src: [字体源声明];
  [字体描述符];
}

参数：

  • font-family：string，定义字体家族名称（自定义标识符）。

  • src：URL列表，字体文件源（支持多个后备源）。

    css
    src: 
  [local('本地字体名称')] /* 优先检查本地 */
  [url('路径.格式') format('字体格式')] /* 主要源 */
  [, url('后备路径.格式') format('格式')]; /* 后备源 */

语法特性：

  1. 格式类型：
    • woff2：现代压缩格式（首选）。
    • woff：广泛兼容格式。
    • truetype/opentype：TTF/OTF。
    • embedded-opentype：EOT（IE专用）。
    • svg：SVG字体（已淘汰）。

性能优化：

  1. 字体子集化

    sh
    # 使用pyftsubset创建子集
pyftsubset font.ttf --output-file=font-subset.woff2 --text="ABCDE12345"

  2. 预加载关键字体

    html
    <head>
  <link rel="preload" href="critical.woff2" as="font" type="font/woff2" crossorigin>
</head>

  3. 异步加载

    js
    // 使用FontFace API
const font = new FontFace('AsyncFont', 'url(async.woff2)');
font.load().then(() => document.fonts.add(font));

  4. 缓存策略

    nginx
    # Nginx 配置
location ~* \.(woff2|woff)$ {
  expires 365d;
  add_header Cache-Control "public";
}

示例：

  1. 完整示例：

    css
    @font-face {
  font-family: 'CustomFont';
  src:
    local('CustomFont Regular'), /* 先检查本地 */
    url('customfont-regular.woff2') format('woff2'), /* 主要源 */
    url('customfont-regular.woff') format('woff'); /* 后备源 */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* 拉丁字符集 */
}

  2. 定义不同字重：

    css
    /* 定义不同字重 */
@font-face {
  font-family: 'Roboto';
  src: url('roboto-thin.woff2') format('woff2');
  font-weight: 100;
}

@font-face {
  font-family: 'Roboto';
  src: url('roboto-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url('roboto-bold.woff2') format('woff2');
  font-weight: 700;
}

/* 使用 */
.light-text { font-weight: 100; }
.bold-text { font-weight: 700; }

  3. 字体图标：

    css
    @font-face {
  font-family: 'IconFont';
  src: url('icons.woff2') format('woff2');
}

.icon::before {
  font-family: 'IconFont';
  content: "\e001"; /* Unicode 编码 */
}

  4. 多语言支持

    css
    /* 仅加载日文字符 */
@font-face {
  font-family: 'JPFont';
  src: url('japanese.woff2') format('woff2');
  unicode-range: U+3000-30FF, U+FF00-FFEF;
}

/* 自动切换 */
:lang(ja) {
  font-family: 'JPFont', sans-serif;
}

外观属性 ​

color ​

color 属性用于定义文本的颜色，其取值方式有如下 3 种：

  • 预定义的颜色值：如 red，green，blue 等。

  • 十六进制：如#FF0000，#FF6600，#29D794 等。实际工作中，十六进制是最常用的定义颜色的方式。

  • rgb()：如红色可以表示为 rgb(255,0,0)或 rgb(100%,0%,0%)。

    • 注意：如果使用 RGB 代码的百分比颜色值，取值为 0 时也不能省略百分号，必须写为 0%。

line-height ​

line-height 属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

line-height 常用的属性值单位有三种，分别为像素 px，相对值 em 和百分比%，实际工作中使用最多的是像素 px

技巧：

  • 文字垂直居中：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。
  • 最佳方案：一般情况下，行距比字号大 7、8 个像素左右就可以了。

text-align ​

text-align属性用于设置文本内容的水平对齐，相当于 html 中的 align 对齐属性。其可用属性值如下：

  • left：左对齐（默认值）。

  • right：右对齐。

  • center：居中对齐。

text-indent ​

text-indent 属性用于设置首行文本的缩进。

单位：属性值可为：

  • 不同单位的数值
  • em 字符宽度的倍数
  • 相对于浏览器窗口宽度的百分比%

取值范围：允许使用负值。

最佳方案：建议使用 em 作为设置单位。

  • 1em 就是一个字符的宽度。

  • 如果是汉字的段落， 1em 就是一个汉字的宽度。

letter-spacing ​

letter-spacing 属性用于定义字间距，所谓字间距就是字符与字符之间的空白。

单位：其属性值可为不同单位的数值。

取值范围：允许使用负值，默认：normal。

word-spacing ​

word-spacing 属性用于定义英文单词之间的间距，对中文字符无效。

单位：和 letter-spacing 一样，其属性值可为不同单位的数值。

取值范围：允许使用负值，默认：normal。

对比letter-spacing：word-spacing 和 letter-spacing 均可对英文进行设置。不同的是

  • letter-spacing 定义的为字母之间的间距。
  • word-spacing 定义的为英文单词之间的间距。

text-decoration ​

text-decoration：通常我们用于给链接修改装饰效果。

值描述
none默认，定义标准的文本。
underline定义文本下的一条线。下划线 也是我们链接自带的
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。

案例：导航栏

html
<head>
  <meta charset="utf-8" />
  <style>
    body {
      background-color: #000;
    }
    a {
      width: 200px;
      height: 50px;
      /* background-color: orange; */
      display: inline-block; /* 把a 行内元素转换为行内块元素 */
      text-align: center; /* 文字水平居中 */
      line-height: 50px; /* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */
      color: #fff;
      font-size: 22px;
      text-decoration: none; /* 取消下划线 文本装饰 */
    }
    a:hover {
      /* 鼠标经过 给我们的链接添加背景图片*/
      background: url(images/h.png) no-repeat;
    }
  </style>
</head>
<body>
  <a href="#">专区说明</a>
  <a href="#">申请资格</a>
  <a href="#">兑换奖励</a>
  <a href="#">下载游戏</a>
</body>

rgba()(CSS3) ​

文字颜色到了 CSS3 我们可以采取半透明的格式了语法格式如下：

css
color: rgba(r, g, b, a);
  • a 是 alpha，透明的意思，取值范围 0~1 之间。

示例：

css
color: rgba(0, 0, 0, 0.3);

text-shadow(CSS3) ​

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

css
text-shadow: 水平位置 垂直位置 [模糊距离] [阴影颜色];

说明： 前两项是必须写的，后两项可以选写。

案例：凹凸文字

css
<head>
    <meta charset="utf-8">
    <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    </style>
</head>
<body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
</body>

box-shadow(CSS3) ​

box-shadow：inset|hoffset|voffset|blur|spread|color，用于为元素添加阴影效果，支持创建单层或多层阴影，可控制阴影的位置、模糊度、扩散范围和颜色。

  • inset：将外部阴影改为内部阴影。

  • hoffset：水平偏移（正=右，负=左）。

  • voffset：垂直偏移（正=下，负=上）。

  • blur：模糊半径（值越大越模糊，0=锐利边缘）。

  • spread：阴影扩散（正=扩大，负=收缩）。

  • color：阴影颜色（默认=当前文本颜色）。

语法特性：

  1. 阴影堆叠顺序：先定义的阴影显示在顶层。

    css
    /* 蓝色在上层，红色在下层 */
box-shadow: 0 0 10px blue, 0 0 20px red;

  2. 与元素的关系：

    • 阴影不占用布局空间。
    • 随元素圆角变化（border-radius）。
    • 不影响点击区域。

  3. 性能优化：

    • 避免大面积使用高模糊值（blur > 20px）。
    • 优先使用 rgba() 控制透明度替代 opacity。

示例：

  1. 基本使用：

    css
    /* 基础外阴影 */
.element {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

/* 内阴影 */
.element-inset {
  box-shadow: inset 0 0 20px #ff0000;
}

/* 多重阴影 */
.element-multi {
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.2);
}

/* 带扩散的阴影 */
.element-spread {
  box-shadow: 0 0 0 5px rgba(0,128,0,0.3); /* 绿色描边效果 */
}

/* 高级组合 */
.element-complex {
  box-shadow: 
    inset 3px 3px 5px #fff,
    -5px -5px 15px rgba(0,0,0,0.3);
}

  2. 特殊效果实现：

    css
    /* 发光效果 */
.glow { box-shadow: 0 0 20px 5px #ff00ff; }

/* 浮动效果 */
.float { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* 压痕效果 */
.depressed { box-shadow: inset 0 2px 5px #000; }

背景 ​

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

background-color背景颜色
background-color背景颜色
background-image背景图片地址
background-repeat是否平铺
background-attachment背景固定还是滚动
background-position背景位置
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置背景的合写（复合属性）

background-image ​

background-image：属性用于设置元素的背景图像。允许指定一个图片展示在背景中（只有 CSS3 才可以多背景）。

语法：

css
background-image: none | url (url);

参数：

  • none：默认，无背景图。
  • url()：使用绝对或相对地址指定背景图像。

结合 background-color：如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

示例：

css
.example3 {
  background-image: url('image.jpg');
  background-repeat: no-repeat; /* 不重复 */
  background-size: cover; /* 覆盖整个元素 */
  background-position: center; /* 居中 */
}

background-repeat ​

background-repeat：用于设置背景图像的重复方式。

语法：

css
background-repeat: repeat | no-repeat | repeat-x | repeat-y;

参数：

  • repeat：背景图像在纵向和横向上平铺（默认的）。

  • no-repeat：背景图像不平铺。

  • repeat-x：背景图像在横向上平铺。

  • repeat-y：背景图像在纵向平铺。

示例：

css
.example2 {
  background-image: url('image.jpg');
  background-repeat: repeat-x; /* 水平重复 */
}

background-attachment ​

background-attachment：设置或检索背景图像是随对象内容滚动还是固定的。

语法：

css
background-attachment: scroll | fixed;

参数：

  • scroll：默认，背景图像是随对象内容滚动。

  • fixed：背景图像固定。

示例：

css
.example2 {
  background-image: url('image.jpg');
  background-attachment: fixed; /* 背景固定 */
}

说明：使用 fixed 时，背景图像会相对于视口位置固定，适合制作固定背景效果。

background-position ​

background-position：用于设置背景图像的位置。

语法：

css
background-position : x y

参数：

  • x：默认：0%，水平位置。
  • y：默认：0%，垂直位置。

注意：

  • x和y的值可以是：
    • 长度值：10px、0(值为0可以省略px)
    • 百分比：50%
    • 关键字：top, bottom,left,right,center
  • 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50%。

示例：

css
.example1 {
  background-image: url('image.jpg');
  background-position: center top;
}

.example2 {
  background-image: url('image.jpg');
  background-position: 10px 20px; /* 10px 从左边, 20px 从顶部 */
}

.example3 {
  background-image: url('image.jpg');
  background-position: 50% 50%; /* 居中对齐 */
}

background@ ​

background：是背景简写属性，可一次性设置多个背景层（包括图像、渐变和纯色）的所有背景样式。

语法：

css
selector {
  background: [<bg-layer>,]* <final-bg-layer>;
}
  • <bg-layer>*：背景层。
  • <final-bg-layer>：最后的背景层。

核心规则：

  1. 多背景支持：用逗号分隔多个背景层

    • 背景色只能在最后一层指定
    • 各层的 attachment 必须相同（浏览器限制）
    • 最大支持 10 个背景层（多数浏览器）

  2. 必需参数：无绝对必需项，但未指定时使用默认值

  3. 层叠顺序：第一个背景层在最上方

  4. 最终层特殊：只有 <final-bg-layer> 可包含背景色

  5. 参数顺序：自由但推荐约定顺序（见最佳实践），推荐使用顺序：

    css
    background: 
  [color]
  [image] 
  [position] [ / size] 
  [repeat] 
  [attachment] 
  [origin] [clip];

示例：

  1. 完整语法示例

    css
    /* 单层背景 */
background: #00f url("star.png") center/80% no-repeat fixed padding-box content-box;

/* 多层背景 */
background: 
  url("layer1.png") top left / contain repeat-x,
  linear-gradient(45deg, blue, transparent) right/200px 100px no-repeat local,
  #ff0; /* 背景色只能在最后一层 */

/* 最小有效声明 */
background: #fff; /* 纯色背景 */
background: url("img.jpg"); /* 默认定位/重复 */

  2. 文字特效

    css
    h1 {
  background: url("gold.jpg");
  -webkit-background-clip: text; /* 实验性功能 */
  color: transparent;
}

  3. 多背景组织技巧

    css
    background: 
  /* 顶层：装饰性元素 */
  url("decoration.svg") top right / 100px no-repeat,
  
  /* 中间层：半透明覆盖 */
  linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
  
  /* 底层：主背景+颜色回退 */
  url("main-bg.jpg") center/cover,
  #eaeaea;

  4. 安全覆盖策略

    css
    /* 先设置简写 */
.element { background: url("base.png"); }

/* 再单独调整 */
.element:hover {
  background-position: center 20%; /* 只覆盖位置 */
}

  5. 性能优化

    css
    /* 合并请求（雪碧图） */
.icons {
  background: url("sprite.png") no-repeat;
}
.icon-home { background-position: 0 0; }
.icon-user { background-position: -32px 0; }

  6. 视差滚动

    css
    .parallax {
  background: url("bg.jpg") center/cover fixed;
}

  7. 边框渐变

    css
    .box {
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, red, blue) border-box;
  border: 5px solid transparent;
}

  8. 动画背景

    css
    @keyframes move {
  0% { background-position: 0 0; }
  100% { background-position: 200% 0; }
}

.animated {
  background: url("pattern.png") 0 0 repeat-x;
  animation: move 10s linear infinite;
}

背景透明(CSS3) ​

CSS3 支持背景半透明的写法语法格式是:

css
background: rgba(0, 0, 0, 0.3);
  • a：最后一个参数是 alpha 透明度， 取值范围：0-1。

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

同样可以给文字和边框透明，都是 rgba 的格式来写

多背景(CSS3) ​

以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。

注意：

  • 每组属性间使用逗号分隔。
  • 背景图像的顺序是从上到下，即第一个图像在最上层，后面的图像依次叠加。
  • 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

示例：

css
background: url(test1.jpg) no-repeat scroll 10px 20px/50px 60px,
			url(test2.jpg) no-repeat scroll 10px 20px/70px 90px,
			url(test3.jpg) no-repeat scroll 10px 20px/110px 130px #aaa;

示例：

css
.example {
    background: 
        url('image1.jpg') center / cover no-repeat fixed,
        url('image2.png') top right / contain no-repeat fixed,
    	#fff;
}

说明：使用透明背景颜色可以创建出层次感。

background-size(CSS3) ​

background-size：用于设置背景图像的大小，可以控制图像如何适应元素的尺寸。

应用：在移动 Web 开发中做屏幕适配。

语法：

css
background-size: width height | cover | contain | inherit;

参数：

  • width height：长度值 | 百分比，指定图像的具体宽度和高度。单位可以是长度值或百分比。设置百分比时，参照盒子的宽高。
  • cover：推荐，背景图像将按比例缩放，以完全覆盖元素。可能会裁剪图像的部分以适应元素的尺寸。
  • contain：背景图像将按比例缩放，以确保整个图像都在元素内显示。可能会留白区域以适应元素的尺寸。
  • inherit：继承父元素的背景大小设置。

示例：

css
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

background-origin(CSS3) ​

background-origin：border-box|padding-box|content-box，默认：padding-box，控制背景图像定位参考区域，决定背景图像相对于哪个盒子模型区域进行定位。

  • border-box：背景延伸到边框区域。

  • padding-box：背景延伸到内边距区域（不包含边框）。

  • content-box：背景仅出现在内容区域。

语法特性：

  1. 配合 background-clip：

    • background-origin：控制背景定位的起点。
    • background-clip：控制背景绘制的范围。
    css
    .special-box {
  background-origin: content-box;  /* 图片从内容区开始定位 */
  background-clip: padding-box;    /* 但只绘制到内边距区域 */
  background-position: 10px 20px;
}

  2. 多背景支持：

    css
    .multi-bg {
  background-image: url("img1.png"), url("img2.jpg");
  background-origin: content-box, border-box; /* 为每个背景单独设置 */
}

示例：

  1. 基本使用：

    css
    .box {
  width: 300px;
  height: 200px;
  padding: 30px;
  border: 15px dashed rgba(0,0,0,0.3);
  background-image: url("pattern.png");
  background-repeat: no-repeat;
  background-position: top left;
}

/* 不同定位基准的对比 */
.example1 { background-origin: border-box; }    /* 图片从边框左上角开始 */
.example2 { background-origin: padding-box; }   /* 图片从内边距左上角开始（默认） */
.example3 { background-origin: content-box; }    /* 图片从内容区域左上角开始 */

background-clip(CSS3) ​

background-clip：border-box|padding-box|content-box|text，默认：border-box，带前缀，控制背景绘制区域，决定背景（颜色/图像/渐变）应该延伸到元素的哪个盒子模型区域。

  • border-box：默认，背景延伸到边框外边缘。

  • padding-box：背景延伸到内边距外边缘（不包含边框）。

  • content-box：背景仅绘制在内容区域。

  • text：背景被裁剪为文本前景（需配合透明文本颜色）。

示例：

  1. 基本使用：

    css
    .box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 15px dashed rgba(255,0,0,0.5);
  background: linear-gradient(45deg, blue, green);
  color: black;
}

/* 不同裁剪区域效果 */
.clip-border  { background-clip: border-box; }   /* 背景覆盖整个边框区域 */
.clip-padding { background-clip: padding-box; }  /* 背景只到内边距边缘 */
.clip-content { background-clip: content-box; }   /* 背景仅限内容区域 */
.clip-text    { 
  background-clip: text; 
  -webkit-background-clip: text; /* 兼容Webkit */
  color: transparent; /* 必需！使文字透明显示背景 */
}

  2. 多背景支持：

    css
    .multi-bg {
  background: 
    url("texture.png") padding-box,
    linear-gradient(red, blue) content-box;
}

  3. 文字特效（需兼容处理）：

    css
    .gradient-text {
  background: linear-gradient(90deg, red, purple);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 3em;
  font-weight: bold;
}

  4. 进度条效果

    css
    .progress-bar {
  width: 300px;
  height: 30px;
  border: 2px solid #333;
  background-clip: content-box; /* 核心 */
  background: 
    linear-gradient(90deg, green 75%, #eee 0);
  padding: 3px; /* 创建内边距作为轨道 */
}

显示和隐藏 ​

在 CSS 中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！

display ​

display：none，完全从渲染流中移除元素，使元素不可见且不占据任何布局空间。

语法特性：

  1. 视觉隐藏：

    • 元素从视图中消失
    • 不响应鼠标事件（点击、悬停等）
    • 屏幕阅读器无法访问（对辅助工具有影响）

  2. 布局影响：

    • 元素不占据文档流空间
    • 相邻元素会重新排列填补空缺
    • 不影响其他元素的布局计算

  3. 渲染性能：

    • 浏览器完全跳过渲染过程
    • 不会触发重排（reflow）或重绘（repaint）
    • 比 visibility: hidden 性能更优

示例：

  1. 基本使用

    css
    .hidden-element {
  display: none; /* 元素完全不可见 */
}

.show-element {
  display: block; /* 元素显示 */
}

visibility ​

visibility：visible|hidden|collapse，默认：visible，可继承，控制元素及其子元素是否可见，但不会改变其在文档流中的位置，仍会占据布局空间。

  • visible：默认，元素及其内容完全可见。

  • hidden：元素不可见，但保留其空间。

  • collapse：特殊隐藏模式，行为因元素类型而异：

    • 表格行/列/行组/列组：隐藏元素且不占据空间（类似 display: none）。

    • 其他元素：等同于 hidden（仍占据空间）。

    • Flex/Grid 项目：等同于 hidden（仍占据空间）。

语法特性：

  1. 对比 display: none 和 opacity: 0：

    特性visibility: hiddendisplay: noneopacity: 0
    布局空间保留移除保留
    渲染渲染但不可见完全不渲染渲染但不可见
    事件不接收事件不接收事件接收事件
    动画可与 opacity 动画配合无法动画可以动画
    继承性可继承，子元素可覆盖不可继承不可继承
    GPU 加速无有无

示例：

  1. 子元素覆盖父元素隐藏：子元素可通过设置 visibility: visible 覆盖父元素的隐藏状态

    css
    .parent-hidden {
  visibility: hidden;
}

.child-visible {
  visibility: visible; /* 覆盖父元素的隐藏 */
  position: absolute; /* 可能需要调整位置 */
}

  2. 表格行隐藏：

    html
    <table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr class="collapsed">
    <td>隐藏行</td>
    <td>数据</td>
  </tr>
  <tr>
    <td>可见行</td>
    <td>数据</td>
  </tr>
</table>
    css
    tr.collapsed {
  visibility: collapse; /* 不占据空间 */
}

  3. 动画与可见性配合：

    css
    .fade-element {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.fade-element.show {
  visibility: visible;
  opacity: 1;
}

overflow ​

overflow：visible|hidden|clip|scroll|auto，默认：visible，控制元素内容溢出其容器时的行为（是否显示滚动条以及如何裁剪内容）。

  • visible：默认，溢出内容可见，不裁剪。

  • hidden：裁剪溢出内容。

  • clip：严格裁剪内容，类似 hidden，但禁止JS滚动。

  • scroll：始终显示滚动条（即使内容未溢出）。

  • auto：仅在内容溢出时显示滚动条。

语法特性：

  1. 创建BFC：设置overflow: 非visible时会创建块级格式化上下文（BFC）。

应用场景：

  1. 自定义滚动条：

    css
    .custom-scroll {
  overflow: auto;
  max-height: 300px;
}

/* 现代浏览器滚动条样式 */
.custom-scroll::-webkit-scrollbar {
  width: 10px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

  2. 安全滚动：

    css
    .scroll-safe {
  overflow: auto;
  scrollbar-gutter: stable; /* 预留滚动条空间 */
  overscroll-behavior: contain; /* 阻止滚动链 */
}

常见问题：

  1. 滚动条抖动问题：

    css
    .scroll-container {
  overflow-y: scroll; /* 始终显示滚动条避免宽度变化 */
  width: 100%;
}

/* 替代方案：预留滚动条空间 */
body {
  overflow-y: scroll;
}

  2. 移动端滚动优化：

    css
    .touch-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* 启用惯性滚动 */
}

  3. 嵌套滚动冲突：

    css
    .parent-scroll {
  overflow: auto;
  height: 500px;
}

.child-scroll {
  overflow: auto;
  max-height: 200px;
  overscroll-behavior: contain; /* 阻止滚动链 */
}

用户界面 ​

所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽

cursor ​

cursor：default|pointer|move|text|url()|...，可继承，控制鼠标指针在元素上的显示样式。关键字值。

  • default：默认箭头

  • pointer：手形，可点击元素（链接、按钮）。

  • move：移动，可拖拽元素。

  • text：文本选择，可编辑文本区域。

  • url()：自定义光标，使用 url() 函数指定自定义光标图像。

语法特性：

  1. 自定义光标：使用 url() 函数指定自定义光标图像。

    • 格式支持：.cur, .ani, .png, .svg (浏览器支持不同)。
    • 后备机制：逗号分隔多个值，最后为通用光标类型。
    • 热点位置：可指定坐标 (x y)，如 url(cursor.png) 10 15。
    • 使用小尺寸图片：自定义光标图像应小巧（通常 32x32px）。
    css
    cursor: url(path/to/cursor.cur), auto;
cursor: url(pointer.png) 5 5, pointer; /* 指定热点位置 */

示例：

  1. 基本交互反馈：

    css
    /* 可点击元素 */
button, a {
  cursor: pointer;
}

/* 禁用状态 */
button:disabled {
  cursor: not-allowed;
}

/* 文本输入 */
input[type="text"], textarea {
  cursor: text;
}

  2. 拖拽界面：

    css
    .draggable {
  cursor: grab;
}

.draggable:active {
  cursor: grabbing;
}

.dropzone {
  cursor: no-drop; /* 不可放置 */
}

.dropzone.active {
  cursor: copy; /* 可放置 */
}

  3. 图像编辑工具：

    css
    .crop-tool {
  cursor: crosshair;
}

.rotate-tool {
  cursor: url(rotate-cursor.svg) 16 16, move;
}

.zoom-in {
  cursor: zoom-in;
}

.zoom-out {
  cursor: zoom-out;
}

  4. 自定义游戏光标：

    css
    .game-container {
  cursor: url(game-cursor.png) 16 16, auto;
  /* 禁用默认光标 */
  user-select: none;
}

/* 不同状态不同光标 */
.weapon-pistol { cursor: url(pistol.png) 4 16, crosshair; }
.weapon-sniper { cursor: url(sniper.png) 16 16, crosshair; }

outline ​

outline：width style color，用于在元素边框外围绘制轮廓线，常用于为元素获得焦点提供视觉反馈。

  • width：Length，轮廓线宽度。

  • style：none|solid|dashed|dotted|double|...，轮廓线样式。

    • none：默认，无轮廓

    • solid：常用，轮廓为单实线

    • dashed：轮廓为虚线

    • dotted：轮廓为点线

    • double：轮廓为双实线

  • color：Color，轮廓线颜色。

语法特性：

  1. 对比 border：

    特性outlineborder
    布局影响无 (不占空间)有 (影响盒模型)
    圆角适应不跟随 border-radius跟随 border-radius
    位置边框外部边框位置
    多边控制只能整体设置可分边设置
    偏移有 outline-offset无

示例：

  1. 焦点样式：

    css
    /* 默认浏览器焦点样式 */
:focus {
  outline: 2px solid blue;
}

/* 自定义焦点样式 */
input:focus {
  outline: 3px dotted #ff9900;
  outline-offset: 3px;
}

  2. 最佳实践：移除默认焦点轮廓

    css
    button:focus {
  outline: none;
}

resize ​

resize：none|both|horizontal|vertical|...，默认：none，控制元素是否可由用户调整大小。

  • none：默认，禁止调整大小。

  • both：允许水平和垂直双向调整（右下角显示拖拽手柄）

  • horizontal：仅允许水平调整（显示右侧拖拽手柄）

  • vertical：仅允许垂直调整（显示底部拖拽手柄）

语法特性：

  1. 生效条件：必须设置 overflow 非 visible（常用 auto/scroll）。

    css
    .valid-resize {
  resize: both;
  overflow: auto; /* 必需 */
}

  2. 最小尺寸限制：用 min-width/min-height 防止用户缩放过小。

    css
    .resizable {
  resize: both;
  overflow: auto;
  min-width: 100px;
  min-height: 50px;
}

  3. 浏览器默认行为：

    • <textarea> 默认可调整（等同于 resize: both）。
    • 其他元素默认 resize: none。

示例：

  1. 基本使用：

    css
    /* 禁止调整 */
.no-resize {
  resize: none;
  overflow: auto;
}

/* 双向调整 */
.resizable-box {
  resize: both;
  overflow: scroll;
  border: 1px solid #ccc;
}

/* 垂直调整 */
.vertical-resize {
  resize: vertical;
  overflow: auto;
}

/* 块方向调整（中文环境下=垂直） */
.block-resize {
  resize: block;
  writing-mode: horizontal-tb; /* 默认值 */
  overflow: hidden;
}

垂直对齐 ​

vertical-align ​

vertical-align：baseline|middle|top|bottom，默认：baseline，控制行内元素和表格单元格垂直对齐方式。

  • baseline：默认，文本基线与父元素基线对齐。

  • middle：元素垂直居中于父元素文本中部。

  • top：元素顶部对齐行框顶部。

  • bottom：元素底部对齐行框底部。

语法特性：

  1. 仅适用于特定元素：

    • 行内元素：inline, inline-block, inline-table。
    • 表格单元格：table-cell。

  2. 对块级元素无效：

    css
    div { vertical-align: middle; } /* 无效! */

  3. 图片底部间隙问题：

    问题：图片底部常会出现间隙，这是因为图片默认是inline元素且vertical-align: baseline。

    html
    <div>
  <img src="example.jpg" alt="示例">
</div>

    解决方法：

    • 方法一：vertical-align: 非baseline。
    • 方法二：display: block。
    css
    img {
  vertical-align: bottom; /* 或 middle/top */
  /* 或者 */
  display: block;
}

  4. 百分比值基准：百分比值(50%, -100%等)是相对于元素自身的行高(line-height)计算的，而非父元素高度。

选择器 ​

CSS 选择器：用于选择 HTML 元素并应用样式。

分类：CSS 选择器可以分为：

  • 基础选择器
  • 组合选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

基础选择器 ​

元素选择器 ​

元素选择器：是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法格式：

css
标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}
元素名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}

优点/缺点：

  • 标签选择器最大的优点是能快速为页面中同类型的标签统一样式。
  • 同时这也是他的缺点，不能设计差异化样式。

示例：

css
p {
  color: blue;
}

类选择器 ​

类选择器：使用.（英文点号）进行标识，后面紧跟类名。

语法格式：

.类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

注意：

  • 长名称或词组可以使用中横线-来为选择器命名。
  • 不建议使用下划线_来命名 CSS 选择器。
  • 不要纯数字、中文等命名， 尽量使用英文字母来表示。

案例：Google

html
<head>
  <meta charset="utf-8" />
  <style>
    span {
      font-size: 100px;
    }
    .blue {
      color: blue;
    }
    .red {
      color: red;
    }
    .orange {
      color: orange;
    }
    .green {
      color: green;
    }
  </style>
</head>
<body>
  <span class="blue">G</span>
  <span class="red">o</span>
  <span class="orange">o</span>
  <span class="blue">g</span>
  <span class="green">l</span>
  <span class="red">e</span>
</body>

多类名选择器：我们可以给标签指定多个类名，从而达到更多的选择目的。

特性：

  1. 样式显示效果：跟HTML元素中的类名先后顺序没有关系,和CSS样式书写的上下顺序有关。
  2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

html
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id 选择器 ​

id 选择器：使用#进行标识，后面紧跟 id 名。

语法格式：

#id名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  • id名：即为 HTML 元素的 id 属性值，大多数 HTML 元素都可以定义 id 属性，元素的 id 值是唯一的，只能对应于文档中某一个具体的元素。
  • 用法：基本和类选择器相同。

id 选择器 VS 类选择器 ​

W3C 标准规定，在同一个页面内，不允许有相同名字的 id 对象出现，但是允许相同名字的 class。

  • 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

  • id 选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

id 选择器和类选择器最大的不同在于 使用次数上。

通配符选择器 ​

通配符选择器：用*号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

语法格式：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

应用：清除边距：使用通配符选择器定义 CSS 样式，清除所有 HTML 标记的默认边距。

css
* {
  margin: 0; /* 定义外边距*/
  padding: 0; /* 定义内边距*/
}

组合选择器 ​

组合选择器：是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

后代选择器 ​

后代选择器（包含选择器）：用来选择元素或元素组的后代。

语法格式：外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签。

css
div p {
  margin: 10px;
}

子元素选择器 ​

子元素选择器：只能选择作为某元素子元素的元素。

语法格式：父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，符号左右两侧各保留一个空格。

白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

css
ul > li {
  list-style-type: none;
}

说明：li 是 ul 的亲儿子，ul 元素包裹着 li。

兄弟选择器-相邻 ​

相邻兄弟选择器：选择紧跟在某个元素后的同级元素。

css
h1 + p {
  font-weight: bold;
}

兄弟选择器-通用 ​

通用兄弟选择器：选择某个元素之后的所有同级元素。

css
h1 ~ p {
  color: red;
}

交集选择器 ​

交集选择器：由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格，如 h3.special。

示例：

html
<p class="one">这是一个段落</p>
css
p.one {
  color: red;
}

并集选择器 ​

并集选择器（CSS 选择器分组）：是各个选择器通过 , 连接而成的，任何形式的选择器（包括标签选择器、class 类选择器 id 选择器等），都可以作为并集选择器的一部分。

应用：如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。

示例：

css
html,
body {
  margin: 0;
  padding: 0;
}

练习 ​

html
<div class="nav">
  <!-- 主导航栏 -->
  <ul>
    <li><a href="#">公司首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司产品</a></li>
    <li>
      <a href="#">联系我们</a>
      <ul>
        <li><a href="#">公司邮箱</a></li>
        <li><a href="#">公司电话</a></li>
      </ul>
    </li>
  </ul>
</div>
<div class="sitenav">
  <!-- 侧导航栏 -->
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>

在不修改以上代码的前提下，完成以下任务：

  1. 链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为蓝色(简单)

  2. 主导航栏和侧导航栏里面文字都是 14 像素并且是微软雅黑。（中等)

  3. 主导航栏里面的一级菜单链接文字颜色为绿色。（难)

属性选择器(CSS3) ​

属性选择器：选择带有特定属性的元素。

  • E[attr]：存在attr属性即可。

    css
    div[class]

  • E[attr=val]：属性值完全等于val。

    css
    div[class='font']

  • E[attr*=val]：属性值里包含val字符，且在任意位置。

    css
    div[class*='tao']

  • E[attr^=val]：属性值里包含val字符，且在开始位置。

    css
    div[class^='font']

  • E[attr$=val]：属性值里包含val字符，且在结束位置。

    css
    div[class$='footer']

伪类选择器 ​

伪类选择器：用于为某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第 1 个，第 n 个元素。

伪类选择器通常以单冒号（:）开头。

链接伪类 ​

注意： 书写的时候尽量按照 lvha 的顺序。

  • :link：未访问的链接。
  • :visited：已访问的链接。
  • :hover：鼠标移动到链接上。
  • :active：选定的链接，当我们点击的时候没有松开时的状态。

示例：基本使用

css
/* a是标签选择器，所有的链接 */
a {
  font-weight: 700;
  font-size: 16px;
  color: gray;
}
/* a:hover是伪类选择器，鼠标经过 */
a:hover {
  color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

结构性伪类（CSS3)@ ​

  • :first-child：选取属于其父元素的首个子元素的指定选择器。
  • :last-child：选取属于其父元素的最后一个子元素的指定选择器。
  • :nth-child(n)：匹配属于其父元素的第 N 个子元素，不论元素的类型，N 从 1 开始。
  • :nth-last-child(n)：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
  • :first-of-type：选择作为其父元素的指定类型的第一个元素。
  • :last-of-type：选择作为其父元素的指定类型的最后一个元素。
  • :nth-of-type(n)：选择作为其父元素的指定类型的第 n 个元素，忽略其他类型的元素。
  • :nth-last-of-type(n)：选择作为其父元素的指定类型的第 n 个元素，但从最后一个元素开始计数。
  • :not(selector)：选择不匹配指定选择器的元素。

注意： n 可以是数字（1、2、3...）、关键词（even、odd）或公式（3n）

css
li:first-child {
  /*  选择第一个孩子 */
  color: pink;
}
li:last-child {
  /* 最后一个孩子 */
  color: purple;
}
li:nth-child(4) {
  /* 选择第4个孩子  n  代表 第几个的意思 */
  color: skyblue;
}
li:nth-child(3n) {
  /* n从0开始，选择第3*n个孩子 即0、3、6、9... */
  color: red;
}
li:nth-child(-n + 5) {
  /* n从0开始，选择前5个孩子 即0、1、2、3、4 */
  color: red;
}

li:not(.completed) {
  text-decoration: line-through; /* 不是已完成的列表项添加删除线 */
}

:first-child 对比 :first-of-type

  • :first-child 选择的是作为其父元素的第一个子元素的元素。
  • :first-of-type 选择的是作为其父元素中指定类型的第一个元素。
  • 如果一个元素是某种类型的第一个，但不是第一个子元素，:first-child 不会选中它，而 :first-of-type 会。

示例： 对比 :first-child 和 :first-of-type 之间的区别

image-20240924215452677

:target(CSS3)@ ​

  • :target：目标伪类选择器，用于选择当前 URL 中的锚点（即 hash 值）。当某个元素的 ID 与 URL 中的 hash 值匹配时，该选择器会被激活。
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* 默认样式 */
      .section {
        padding: 20px;
        border: 1px solid #ccc;
        margin: 10px 0;
      }
      /* :target 样式 */
      #section1:target {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>跳转到</h2>
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>

    <div id="section1" class="section">这是第一个部分。</div>
    <div id="section2" class="section">这是第二个部分。</div>
  </body>
</html>

:root@ ​

:root：这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

应用： :root 常用于声明全局 CSS 变量

css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

伪类函数(CSS3)@ ​

:is() ​

:is()：伪类函数以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。

应用： :is() 伪类可以大大简化你的 CSS 选择器。

css
/* 三层或更深的无序列表使用方形符号。 */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

说明：以上选中器可以替代由第一层：ol, ul, menu, dir、第二层ol, ul, menu, dir、第三层ul, menu, dir。排列组合的选择器组合。

:where() ​

:where()：伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

对比 :is()：

  • :where()的优先级总是为 0。
  • :is()的优先级是由它的选择器列表中优先级最高的选择器决定的。

示例：

css
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 上面的代码等价于下面 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}
:has() ​

WARNING

:has()有兼容问题

:has()：伪类函数用于选中包含特定子元素的父元素。这使得样式可以根据子元素的存在或状态进行调整。

示例：

html
<style>
  /* 默认样式 */
  .container {
    border: 2px solid #ccc;
    padding: 20px;
    margin: 10px 0;
  }
  /* :has() 样式 */
  .container:has(.highlight) {
    background-color: lightblue;
  }
</style>

<body>
  <div class="container">
    <p>这部分没有高亮。</p>
  </div>
  <div class="container">
    <p class="highlight">这部分有高亮！</p>
  </div>
</body>

伪元素选择器(CSS3)@ ​

伪元素选择器：通常以::开头，用于选择并样式化文档中的特定部分，而不需要在 HTML 中实际存在的元素。

CSS3规范：

  • : 用来表示伪类。
  • :: 用来表示伪元素。

::before ​

::before：伪元素用于在指定元素的内容之前插入内容，常用于添加装饰性元素或文本。

语法：

css
selector::before {
  content: '插入的内容'; /* 必须使用 */
  /* 其他样式 */
}

特性：该元素为行内元素，且必须要结合 content属性使用。

兼容性：

  • E:after、E:before 在旧版本里是伪元素。
  • E:after、E:before 在高版本浏览器下会被自动识别为 E::after、E::before ，这样做的目的是用来做兼容处理。

示例： 添加图标

css
/* 在每个 icon 类的元素前插入一个金色的星号。 */
.icon::before {
  content: '★'; /* 使用星号作为图标 */
  color: gold;
  margin-right: 5px; /* 右边距 */
}

::after ​

::after：伪元素用于在指定元素的内容之后插入内容，通常用于添加装饰性元素或文本。

语法：

css
selector::after {
  content: '插入的内容'; /* 必须使用 */
  /* 其他样式 */
}

特性：该元素为行内元素，且必须要结合 content属性使用。

兼容性：

  • E:after、E:before 在旧版本里是伪元素。
  • E:after、E:before 在高版本浏览器下会被自动识别为 E::after、E::before ，这样做的目的是用来做兼容处理。

示例： 使用空内容

css
/* 在 decorative 类的元素后添加一个蓝色的装饰条。 */
.decorative::after {
  content: '';
  display: block;
  height: 5px; /* 高度 */
  background-color: lightblue; /* 背景色 */
}

其他伪元素 ​

  • E::first-letter：文本的第一个单词或字（如中文、日文、韩文等）。
  • E::first-line：文本第一行。
  • E::selection：可改变选中文本的样式。
css
p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}
/* 可以自定义在页面中选中文字时 被选中部分的样式 */
p::selection {
  /* font-size: 50px; */
  color: orange;
}

动画 ​

进阶 ​

精灵图 ​

概述 ​

精灵图（CSS Sprites）：是一种将多个小图标/背景图像合并到单张大图中的前端优化技术，通过CSS控制显示所需部分，从而减少HTTP请求数量，提升网页加载性能。

精灵技术产生的背景：

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

image-20250610105608982

关键优势：

  • 减少HTTP请求：100个图标 → 1次请求（降低服务器压力）。
  • 提升加载速度：减少网络往返时间（RTT）和TCP连接开销。
  • 预加载效果：一次性加载所有图标，后续使用无延迟。
  • 减小文件体积：合并后比分开存储节省约10%-50%空间。

对比现代替代方案：

技术优点缺点适用场景
精灵图兼容性好，性能优维护成本高兼容性要求高的项目
Icon Font矢量缩放，颜色可控锯齿问题，语义差单色图标系统
SVG Sprite矢量清晰，CSS可控制旧浏览器兼容问题现代浏览器项目
HTTP/2无需合并，原生并行需服务器支持新版服务器环境

图解：单张精灵图包含所有图标

技术实现原理：

  1. 创建合并图：将多个图标合并到一张大图（精灵图）中。

  2. CSS定位控制：

    • 设置元素尺寸为单个图标大小。
    • 将精灵图设为背景。
    • 使用 background-position 偏移显示特定图标。
    css
    .icon-home {
  /* 1. 设置元素尺寸为单个图标大小 */
  width: 30px;
  height: 30px;
  /* 2. 将精灵图设为背景 */
  background: url('sprites.png') no-repeat; 
  /* 3. 通过偏移定位显示特定图标 */
  background-position:  -10px -50px;
}

实现流程 ​

步骤1：创建精灵图

制作精灵图步骤：创建精灵图一般都是网页美工的工作。

  • 收集所有图标
  • 排列图标
  • 导出合并图
  • 计算坐标

注意事项：

  • 图片大小：精灵图上放的都是小图标，不能放大图。
  • 图片宽度：精灵图宽度由最宽的图标决定。
  • 摆放规则：可以横向或纵向摆放，每个图片之间，至少间隔偶数个像素。
  • 预留空间：精灵图最底端预留一些空间方便后续添加其他图标。

步骤2：CSS编码示例

css
/* 通用图标类 */
.icon {
  display: inline-block;
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}

/* 首页图标（位置：x=0, y=0） */
.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

/* 搜索图标（位置：x=-32px, y=0） */
.icon-search {
  width: 24px;
  height: 24px;
  background-position: -32px 0;
}

/* 用户图标（位置：x=-56px, y=0） */
.icon-user {
  width: 28px;
  height: 28px;
  background-position: -56px 0;
}

步骤3：HTML调用

html
<a href="/home" class="icon icon-home"></a>
<button class="icon icon-search"></button>
<div class="icon icon-user"></div>

网络字体 ​

概述 ​

网络字体（Web Fonts）：是一种通过CSS从远程服务器加载字体的技术，突破了传统网页设计只能使用用户本地字体的限制，使设计师能够在网页中精确控制排版效果，实现品牌视觉一致性。

核心优势：

  1. 品牌一致性
    • 确保所有用户看到相同字体
    • 精确匹配LOGO和设计系统字体
  2. 设计自由度
    • 访问数千种专业字体
    • 支持特殊字符（图标字体、罕见符号）
  3. 多语言支持
    • 轻松加载非拉丁语系字体
    • 动态切换语言字体
  4. 性能优化
    • 现代格式体积小（WOFF2比TTF小40%）
    • 智能缓存减少重复加载

对比 本地字体：

特性网络字体本地字体
可用性按需加载依赖用户设备安装
多样性无限选择受限于系统字体
一致性全球统一渲染不同设备显示不同
性能需额外下载即时可用
版权需授权许可无需额外授权

对比 主流字体格式：最佳实践：WOFF2 + WOFF 组合覆盖 99% 浏览器

格式压缩率浏览器支持特点
WOFF2★★★★★Chrome36+, FF39+最优压缩，推荐首选
WOFF★★★★☆IE9+, 所有现代浏览器广泛兼容
TTF/OTF★★☆☆☆全兼容未压缩，体积大
EOT★★☆☆☆仅IE微软专有，逐步淘汰
SVG字体☆☆☆☆☆部分旧移动浏览器已被弃用

实现流程 ​

相关API：

  • @font-face：用于定义自定义网络字体，使网页能够使用用户本地系统未安装的字体。

1、定义字体

css
@font-face {
  font-family: 'MyWebFont';
  src: 
    url('webfont.woff2') format('woff2'), /* 优先格式 */
    url('webfont.woff') format('woff');   /* 后备格式 */
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 控制加载行为 */
}

2、使用字体

css
body {
  font-family: 'MyWebFont', Arial, sans-serif; /* 字体栈 */
}

3、实际加载过程

image-20250613141609914

托管方式 ​

方式一：CDN字体托管服务（推荐）

html
<!-- Google Fonts 示例 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
服务商免费字体付费选项特点
Google Fonts1500+无全球CDN，免费
Adobe Fonts有限20000+创意云集成
Fonts.com少量主流库企业级服务
国内服务（字由、有字库）部分免费有中文字体优化

方式二：自托管字体

优势：完全控制，无第三方依赖 要求：确保字体授权允许网络嵌入

css
@font-face {
  font-family: 'CustomFont';
  src: 
    url('/fonts/custom.woff2') format('woff2'),
    url('/fonts/custom.woff') format('woff');
}

性能优化 ​

  1. 字体加载策略

    css
    @font-face {
  font-display: swap; /* 文本先用后备字体显示，字体加载后替换 */
}

  2. 子集化（Subsetting）

    sh
    # 使用pyftsubset工具创建子集
pyftsubset font.ttf --output-file=font-subset.woff2 --text="你好世界"

  3. 预加载关键字体

    html
    <head>
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>

  4. 异步加载

    less
    // 使用FontFace API
const font = new FontFace('MyFont', 'url(font.woff2)');
font.load().then(() => {
  document.fonts.add(font);
});

中文字体特殊处理 ​

挑战：

  • 中文字体文件大（3-10MB vs 西文50KB）
  • 常用汉字超3000个

方案1：动态子集

js
// 根据页面内容生成字体子集
const chars = new Set(document.body.textContent);
const subsetUrl = `/font?chars=${Array.from(chars).join('')}`;

方案2：分区加载

css
/* 首屏字体 */
@font-face {
  font-family: 'NotoSansSC';
  src: url('noto-sans-sc-lite.woff2');
  unicode-range: U+4E00-4E0F; /* 仅加载部分字符 */
}

方案3：使用字体服务

html
<!-- 有字库智能分包 -->
<script src="https://cdn.webfont.youziku.com/api/v2/yourid.js"></script>

版权问题 ​

  1. 常见授权类型
    • OFL (开源字体)：免费商用（如思源字体）
    • Desktop Only：禁止网络使用
    • Webfont License：需单独购买
  2. 侵权案例
    • 某公司因使用未授权字体被索赔 50 万元
    • 常见高风险字体：方正系列、汉仪系列
  3. 安全来源
    • Google Fonts（全部免费商用）
    • Adobe Fonts（包含在订阅中）
    • 开源字体库（GitHub字体项目）

字体图标 ​

概述 ​

字体图标（Icon Font）：是一种将图标设计为字体字符的前端技术，通过引入特殊字体文件（如TTF/WOFF），在网页中使用CSS控制图标显示，实现矢量化的图标解决方案。

图片的缺陷：

  • 增加了总文件的大小
  • 增加了额外的http 请求
  • 图片放大和缩小会失真

核心优势：

  • 矢量缩放：无限放大不失真，Retina屏完美适配。
  • CSS全控制：通过CSS修改颜色/大小/阴影等属性。
  • 单文件管理：一个字体文件包含所有图标。
  • 加载性能优：WOFF2格式平均比图片小70%。
  • 定位简单：无需计算background-position。

对比 精灵图：

特性字体图标精灵图
缩放能力矢量无限缩放位图放大模糊
颜色控制CSS任意修改需重新制图
文件体积平均5-20KB依分辨率增大
制作难度简单需计算位置
多色支持单色支持多色
浏览器兼容IE8+所有浏览器

主流图标库：

  • Font Awesome（最流行，2023年占据78%市场份额）
  • Material Icons（谷歌设计）
  • Icon Font（阿里出品）
  • Bootstrap Icons

实现流程 ​

实现流程：

  1. 创建图标字体：

    • 设计师绘制矢量图标（SVG格式）

      工具：Sketch、illustrator

    • 通过工具转换为字体文件（TTF/WOFF/WOFF2）

    • 上传到字体网站生成字体包

    • 下载字体网站上的字体（可以是自己制作的，也可以是其他人分享的）

  2. 网页引入：

    css
    /* 定义字体 */
@font-face {
  font-family: 'IconFont';
  src: url('iconfont.woff2') format('woff2');
}

/* 使用图标 */
.icon {
  font-family: 'IconFont';
  speak: none; /* 辅助功能优化 */
}

/* 具体图标 */
.icon-home::before { content: "\e900"; }
.icon-search::before { content: "\e901"; }
.icon-user::before { content: "\e902"; }

  3. 调用具体图标：

    html
    <!-- 方式一：通过CSS伪元素 -->
<i class="icon icon-home"></i>

<!-- 方式二：直接使用字符编码 -->
<span class="icon">&#xE001;</span>

示例：完整使用示例

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 定义字体 */
    @font-face {
      font-family: 'MyIconFont';
      src: url('myfont.woff2') format('woff2');
    }
    
    /* 基础样式 */
    .icon {
      font-family: 'MyIconFont';
      font-style: normal;
      display: inline-block;
    }
    
    /* 具体图标 */
    .icon-home::before { content: "\e900"; }
    .icon-search::before { content: "\e901"; }
    .icon-user::before { content: "\e902"; }
  </style>
</head>
<body>
  <!-- 使用示例 -->
  <button><i class="icon icon-search"></i> 搜索</button>
  <div class="icon icon-user" style="font-size: 48px; color: purple;"></div>
</body>
</html>

常见问题 ​

  1. 多色解决方案：叠加多个图标

    html
    <!-- 通过叠加多个图标 -->
<span class="icon-stack">
  <i class="icon icon-circle" style="color: blue;"></i>
  <i class="icon icon-check" style="color: white;"></i>
</span>

  2. 锯齿问题：字体渲染优化

    css
    .icon {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

  3. 垂直对齐

    css
    .icon {
  vertical-align: middle;
  line-height: 1; /* 消除行高影响 */
}

滑动门 ​

概述 ​

滑动门（Sliding Doors）：是一种经典的CSS背景控制技术，用于创建可自适应宽度的UI组件（如按钮、导航标签）。它通过将两个或多个背景图像"滑动"重叠来实现灵活的元素背景效果，完美解决固定宽度背景图无法适应内容变化的问题。

需求：制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了 CSS 滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

实现流程 ​

工作原理：

  1. 外层元素：
    • 设置右门背景图，固定在右侧
    • 通过padding-right预留右门显示空间
  2. 内层元素：
    • 设置左门背景图，固定在左侧
    • 通过padding-left预留左门显示空间
    • 自动扩展宽度填充父容器
  3. 重叠效果：
    • 内层背景覆盖在外层背景之上
    • 中间区域通过背景色或重复图案连接

实现流程：

  1. 准备背景图

    • 左门图像 (left.png)：宽度足够覆盖最大预期内容

      image-20250613154642730

    • 右门图像 (right.png)：与左门镜像对称

      image-20250613154716672

  2. HTML结构

    html
    <a href="#" class="sliding-door">
  <span class="door-text">首页</span>
</a>

  3. CSS关键代码

    css
    /* 外层容器 - 设置右门背景 */
.sliding-door {
  display: inline-block;
  background: url(right.png) no-repeat right top; /* 右门定位右侧 */
  padding-right: 20px; /* 右门宽度 */
}

/* 内层元素 - 设置左门背景 */
.door-text {
  display: block;
  background: url(left.png) no-repeat left top; /* 左门定位左侧 */
  padding: 8px 0 8px 20px; /* 左门宽度+文字内边距 */
}

现代进化版 ​

单元素实现（使用伪元素）：

css
.modern-door {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
}

.modern-door::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 20px; /* 右门宽度 */
  background: url(left.png) left top repeat-y;
}

.modern-door::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px; /* 右门宽度 */
  background: url(right.png) right top no-repeat;
}